<script setup lang="ts">
// import VueCanvasNest from "@/plugins/effects/VueCanvasNest.vue";
import RibbonCanvas from '@/plugins/effects/RibbonCanvas.vue'
import { useAuthStore} from '@/store'

import "animate.css";

// https://github.com/vueuse/head
// you can use this to manipulate the document head in any components,
// they will be rendered correctly in the html results with vite-ssg
useHead({
  title: '科游社',
  meta: [
    { name: 'description', content: 'Opinionated Vite Starter Template' },
    {
      name: 'theme-color',
      content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
    },
  ],
  link: [
    {
      rel: 'icon',
      // type: 'image/svg+xml',
      type: 'image/ico',
      href: computed(() =>  '/favicon.ico'),
    },
  ],
})


const auth = useAuthStore()
auth.init()



// const el = ref(null)
// const { elWidth, elHeight } = useElementSize(el)

// const { width, height } = useWindowSize()
// console.log(width.value, height.value);

</script>

<template>
  <RouterView/>
  <!-- <VueCanvasNest></VueCanvasNest> -->
  <RibbonCanvas></RibbonCanvas>

</template>
